{% extends 'base.html' %}

{% block title %}删除校区 - {{ campus.name }} - 乒乓球培训管理系统{% endblock %}

{% block page_title %}删除校区{% endblock %}

{% block extra_css %}
<style>
    .delete-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border-left: 5px solid #dc3545;
    }

    .warning-header {
        text-align: center;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid #f8f9fa;
    }

    .warning-icon {
        font-size: 4rem;
        color: #dc3545;
        margin-bottom: 1rem;
    }

    .warning-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: #dc3545;
        margin-bottom: 0.5rem;
    }

    .warning-subtitle {
        color: #6c757d;
        font-size: 1rem;
    }

    .campus-info {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .campus-name {
        font-size: 1.5rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1rem;
    }

    .campus-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .detail-item {
        display: flex;
        align-items: center;
        color: #6c757d;
    }

    .detail-item i {
        margin-right: 0.5rem;
        color: #007bff;
        width: 16px;
    }

    .associations-section {
        margin-bottom: 2rem;
    }

    .associations-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .associations-title i {
        margin-right: 0.5rem;
        color: #ffc107;
    }

    .associations-list {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 1rem;
    }

    .association-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #ffeaa7;
    }

    .association-item:last-child {
        border-bottom: none;
    }

    .association-icon {
        margin-right: 0.5rem;
        color: #856404;
    }

    .association-count {
        background: #ffc107;
        color: #212529;
        padding: 0.25rem 0.5rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .no-associations {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
        color: #155724;
    }

    .confirmation-section {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .confirmation-title {
        font-weight: 600;
        color: #721c24;
        margin-bottom: 1rem;
    }

    .form-control {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    .form-text {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
    }

    .btn-action {
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
        min-width: 120px;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .danger-text {
        color: #dc3545;
        font-weight: 600;
    }

    .invalid-feedback {
        display: block;
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    @media (max-width: 768px) {
        .action-buttons {
            flex-direction: column;
        }

        .btn-action {
            width: 100%;
        }

        .campus-details {
            grid-template-columns: 1fr;
        }

        .delete-card {
            padding: 1.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="delete-card">
                <!-- 警告标题 -->
                <div class="warning-header">
                    <div class="warning-icon">
                        <i class="bi bi-exclamation-triangle"></i>
                    </div>
                    <h2 class="warning-title">删除校区确认</h2>
                    <p class="warning-subtitle">
                        此操作不可撤销，请仔细确认后再执行
                    </p>
                </div>

                <!-- 校区信息 -->
                <div class="campus-info">
                    <h3 class="campus-name">{{ campus.name }}</h3>
                    <div class="campus-details">
                        <div class="detail-item">
                            <i class="bi bi-geo-alt"></i>
                            <span>{{ campus.address }}</span>
                        </div>
                        <div class="detail-item">
                            <i class="bi bi-telephone"></i>
                            <span>{{ campus.phone }}</span>
                        </div>
                        <div class="detail-item">
                            <i class="bi bi-people"></i>
                            <span>容量：{{ campus.capacity }}人</span>
                        </div>
                        <div class="detail-item">
                            <i class="bi bi-person-check"></i>
                            <span>
                                管理员：{% if campus.admin %}{{ campus.admin.real_name }}{% else %}未分配{% endif %}
                            </span>
                        </div>
                        <div class="detail-item">
                            <i class="bi bi-calendar"></i>
                            <span>创建时间：{{ campus.created_at.strftime('%Y年%m月%d日') if campus.created_at else '未知' }}</span>
                        </div>
                        <div class="detail-item">
                            <i class="bi bi-toggle-on"></i>
                            <span>
                                状态：{% if campus.status == 'active' %}正常运营{% else %}暂停运营{% endif %}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 关联数据检查 -->
                <div class="associations-section">
                    <h4 class="associations-title">
                        <i class="bi bi-link-45deg"></i>关联数据检查
                    </h4>

                    {% if associations.can_delete %}
                    <div class="no-associations">
                        <i class="bi bi-check-circle me-2"></i>
                        此校区没有关联数据，可以安全删除
                    </div>
                    {% else %}
                    <div class="associations-list">
                        <div class="alert alert-warning mb-3">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <strong>警告：</strong>{{ associations.message }}
                        </div>

                        {% if associations.user_count > 0 %}
                        <div class="association-item">
                            <span>
                                <i class="bi bi-people association-icon"></i>
                                用户数据
                            </span>
                            <span class="association-count">{{ associations.user_count }} 个用户</span>
                        </div>
                        {% endif %}

                        {% if associations.table_count > 0 %}
                        <div class="association-item">
                            <span>
                                <i class="bi bi-table association-icon"></i>
                                球台数据
                            </span>
                            <span class="association-count">{{ associations.table_count }} 个球台</span>
                        </div>
                        {% endif %}

                        {% if associations.active_reservation_count > 0 %}
                        <div class="association-item">
                            <span>
                                <i class="bi bi-calendar-check association-icon"></i>
                                活跃预约
                            </span>
                            <span class="association-count">{{ associations.active_reservation_count }} 个预约</span>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>

                <!-- 删除确认表单 -->
                {% if associations.can_delete %}
                <form method="POST" id="deleteForm">
                    {{ form.hidden_tag() }}

                    <div class="confirmation-section">
                        <h5 class="confirmation-title">
                            <i class="bi bi-shield-exclamation me-2"></i>安全确认
                        </h5>
                        <p class="mb-3">
                            为了防止误操作，请在下方输入框中输入 <span class="danger-text">"删除"</span> 来确认此操作。
                        </p>

                        <div class="mb-3">
                            {{ form.confirm_text.label(class="form-label") }}
                            {{ form.confirm_text(class="form-control", autocomplete="off") }}
                            {% if form.confirm_text.errors %}
                                {% for error in form.confirm_text.errors %}
                                    <div class="invalid-feedback">{{ error }}</div>
                                {% endfor %}
                            {% endif %}
                            <div class="form-text">请输入"删除"来确认此操作</div>
                        </div>

                        <div class="alert alert-danger">
                            <h6><i class="bi bi-exclamation-triangle me-2"></i>删除后果：</h6>
                            <ul class="mb-0">
                                <li>校区信息将被永久删除</li>
                                <li>管理员与校区的关联将被解除</li>
                                <li>校区照片等附件将被删除</li>
                                <li>此操作无法撤销</li>
                            </ul>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <a href="{{ url_for('campus.detail', id=campus.id) }}" class="btn btn-secondary btn-action">
                            <i class="bi bi-arrow-left me-2"></i>取消
                        </a>
                        <button type="submit" class="btn btn-danger btn-action" id="deleteBtn" disabled>
                            <i class="bi bi-trash me-2"></i>确认删除
                        </button>
                    </div>
                </form>
                {% else %}
                <!-- 无法删除的情况 -->
                <div class="action-buttons">
                    <a href="{{ url_for('campus.detail', id=campus.id) }}" class="btn btn-primary btn-action">
                        <i class="bi bi-arrow-left me-2"></i>返回校区详情
                    </a>
                    <a href="{{ url_for('campus.list') }}" class="btn btn-secondary btn-action">
                        <i class="bi bi-list me-2"></i>返回校区列表
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    {% if associations.can_delete %}
    const confirmInput = document.getElementById('{{ form.confirm_text.id }}');
    const deleteBtn = document.getElementById('deleteBtn');
    const deleteForm = document.getElementById('deleteForm');

    // 监听确认文本输入
    confirmInput.addEventListener('input', function() {
        if (this.value === '删除') {
            deleteBtn.disabled = false;
            deleteBtn.classList.remove('btn-outline-danger');
            deleteBtn.classList.add('btn-danger');
        } else {
            deleteBtn.disabled = true;
            deleteBtn.classList.remove('btn-danger');
            deleteBtn.classList.add('btn-outline-danger');
        }
    });

    // 表单提交确认
    deleteForm.addEventListener('submit', function(e) {
        if (confirmInput.value !== '删除') {
            e.preventDefault();
            alert('请输入"删除"来确认此操作');
            return false;
        }

        // 最后确认
        if (!confirm('您确定要删除校区"{{ campus.name }}"吗？此操作不可撤销！')) {
            e.preventDefault();
            return false;
        }

        // 显示提交中状态
        deleteBtn.disabled = true;
        deleteBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>删除中...';
    });

    // 防止意外刷新
    window.addEventListener('beforeunload', function(e) {
        if (confirmInput.value.length > 0) {
            e.preventDefault();
            e.returnValue = '';
            return '';
        }
    });
    {% endif %}
});
</script>
{% endblock %}